<template>
    <div id="FormApplication" class="row">
        <!--  菜单栏  -->
        <div class="col-xl-2 col-3">
            <a-menu
                mode="inline"
                :open-keys="openKeys"
                @openChange="onOpenChange"
                :default-selected-keys="['item1']"
            >
                <a-sub-menu v-for="subList in FormList" :key="subList.key">
                    <span slot="title">
                        <a-icon :type="subList.titleStyle"/>

                        <span>{{ subList.title }}</span>
                    </span>

                    <a-menu-item v-for="item in subList.childList" :key="item.key" @click="choiceItem(item.key)">
                        {{ item.content }}
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </div>

        <!--  表单栏  -->
        <div class="col-xl-10 col-9">
            <div class="container-fluid">
                <div v-if="contentList.length === 0">
                    <a-empty class="emptyLogo"/>
                </div>

                <div class="contentBox" v-for="formItem in contentList" :key="formItem.key" v-show="formItem.key === activeItemNum">
                    <h2 class="text-center">{{ formItem.title }}</h2>
                    <hr/>

                    <div v-for="item in formItem.itemArr" :key="item.key">
                        <!--  普通文本内容  -->
                        <p class="text-left item-p" v-html="item.content" v-if="item.itemType === 'p'">
                            {{ item.content }}
                        </p>

                        <!--  Echart可视化图表  -->
                        <div class="text-center item-chart" v-if="item.itemType === 'chartList'">
                            <div :id="chart.chartVar + chart.key" style="display: inline-block" :class="'itemNum' + item.itemNum" v-for="chart in item.content" :key="chart.key">
                                <!--{{ chart.alt }}-->
                            </div>
                        </div>

                        <!--  维修表头内容  -->
                        <div class="text-center item-repairData" v-if="item.itemType === 'repairData'">
                            <h4 style="display: inline-block" :class="'itemNum' + item.itemNum" v-for="span in item.content" :key="span.key">
                                {{ span.title }} : {{ span.content }}
                            </h4>
                        </div>

                        <!--  维修表头内容  -->
                        <div class="text-left item-textarea" v-if="item.itemType === 'textarea'">
                            <h3>{{ item.title }}：</h3>
                            <p>{{ item.content }}</p>
                        </div>

                        <!--  PDF文件展示器  -->
                        <div class="text-left item-textarea pdf" v-if="item.itemType === 'pdf'">
                            <div class="pdf-tab text-center">
                                <span class="btn-def btn-pre" @click.stop="prePage">上一页</span>

                                <span class="btn-def btn-next" @click.stop="nextPage">下一页</span>

                                <span class="btn-def" @click="downloadFile({}, item.src)">下载</span>

                                <span class="btn-def" @click.stop="clock">顺时针</span>

                                <span class="btn-def" @click.stop="counterClock">逆时针</span>

                                <div class="btn-data">{{ pdfPageNum }} / {{ pdfTotalNum }}</div>
                                <div class="btn-data">文件缓存进度：{{ loadedRatio * 100 }} % </div>
                                <div class="btn-data">正在浏览页面: {{ curPdfPageNum }} 页</div>
                            </div>

                            <pdf
                                ref="pdf"
                                :src="item.src"
                                :page="pdfPageNum"
                                :rotate="pdfRotate"
                                style="padding: 35px 70px"
                                @password="password"
                                @progress="loadedRatio = $event"
                                @page-loaded="pageLoaded($event)"
                                @num-pages="pdfTotalNum=$event"
                                @error="pdfError($event)"
                                @link-clicked="page = $event">
                            </pdf>

                            <div class="pdf-tab text-center">
                                <span class="btn-def btn-pre" @click.stop="prePage">上一页</span>

                                <span class="btn-def btn-next" @click.stop="nextPage">下一页</span>

                                <span class="btn-def" @click="downloadFile({}, item.src)">下载</span>

                                <span class="btn-def" @click.stop="clock">顺时针</span>

                                <span class="btn-def" @click.stop="counterClock">逆时针</span>

                                <div class="btn-data">{{ pdfPageNum }} / {{ pdfTotalNum }}</div>
                            </div>
                        </div>

                        <!--  PDF上传展示器  -->
                        <div class="text-left item-textarea" v-if="item.itemType === 'showFile'">
                            <a-upload
                                list-type="picture"
                                action="//jsonplaceholder.typicode.com/posts/"
                                :preview-file="previewFile"
                            >
                                <a-button><a-icon type="upload"/> 上传文件 </a-button>
                            </a-upload>
                        </div>
                    </div>

                    <div class="text-right container">
                        <!--  缴费单  -->
                        <div v-if="formItem.formType === 'pay'">
                            <span style="font-weight: bolder">合计：{{ totalMoney }} 元</span>
                            <p>{{ totalDate }}</p>

                            <a class="formSubmit">点击提交</a>
                        </div>

                        <!--  报修申请  -->
                        <div v-if="formItem.formType === 'repair'">
                            <a class="formSubmit">点击提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import echarts from '@/assets/javascript/echarts.min'

    export default {
        name: "FormApplication",
        components: {
            pdf
        },
        props: {
            FormList: {
                type: Array,
                default: function () {
                    return [
                        {
                            key: 'sub1',
                            titleStyle: 'appstore',
                            title: '宿舍费用缴纳',
                            childList: [
                                { key: 'item1', content: '宿舍电费缴纳' },
                                { key: 'item2', content: '宿舍水费缴纳' },
                                { key: 'item3', content: '宿舍物业费缴纳' },
                            ]
                        },
                        {
                            key: 'sub2',
                            titleStyle: 'mail',
                            title: '维修申请',
                            childList: [
                                { key: 'item4', content: '宿舍维护申请' },
                            ]
                        },
                        {
                            key: 'sub3',
                            titleStyle: 'setting',
                            title: '合同申请',
                            childList: [
                                { key: 'item5', content: '租房合同申请' },
                            ]
                        },
                    ]
                }
            },
            contentList: {
                type: Array,
                default: function () {
                    return [
                        {
                            key: 'item1',
                            title: '宿舍电费缴纳单',
                            formType: 'pay',
                            itemArr: [
                                {
                                    key: 0,
                                    itemType: 'p',
                                    content: '尊敬的用户，您好，本月您需缴纳费用如下：'
                                },
                                {
                                    key: 1,
                                    itemType: 'p',
                                    content: '<p>&emsp;&emsp;一周电费：￥55元</p>' +
                                        '<p>&emsp;&emsp;二周电费：￥25元</p>' +
                                        '<p>&emsp;&emsp;三周电费：￥35元</p>' +
                                        '<p>&emsp;&emsp;四周电费：￥17元</p>'
                                },
                                {
                                    key: 2,
                                    itemType: 'chartList',
                                    itemNum: 1,
                                    content: [
                                        { key: 0, chartVar: 'echarts', alt: '可视化图表1' },
                                    ]
                                },
                                {
                                    key: 3,
                                    itemType: 'p',
                                    content: '请及时前往缴费处缴费，如果通知发布7天之内未完成以上全部缴费，则视为违约合同处理，请注意时间\n'
                                },
                            ]
                        },
                        {
                            key: 'item2',
                            title: '宿舍水费缴纳单',
                            formType: 'pay',
                            itemArr: [
                                {
                                    key: 0,
                                    itemType: 'p',
                                    content: '尊敬的用户，您好，本月您需缴纳费用如下：'
                                },
                                {
                                    key: 1,
                                    itemType: 'p',
                                    content: '<p>&emsp;&emsp;一周水费：￥55元</p>' +
                                        '<p>&emsp;&emsp;二周水费：￥25元</p>' +
                                        '<p>&emsp;&emsp;三周水费：￥35元</p>' +
                                        '<p>&emsp;&emsp;四周水费：￥17元</p>'
                                },
                                {
                                    key: 2,
                                    itemType: 'chartList',
                                    itemNum: 1,
                                    content: [
                                        { key: 0, chartVar: 'echarts', alt: '可视化图表1' },
                                    ]
                                },
                                {
                                    key: 3,
                                    itemType: 'p',
                                    content: '请及时前往缴费处缴费，如果通知发布7天之内未完成以上全部缴费，则视为违约合同处理，请注意时间\n'
                                },
                            ]
                        },
                        {
                            key: 'item3',
                            title: '宿舍物业费缴纳单',
                            formType: 'pay',
                            itemArr: [
                                {
                                    key: 0,
                                    itemType: 'p',
                                    content: '尊敬的用户，您好，本月您需缴纳费用如下：'
                                },
                                {
                                    key: 1,
                                    itemType: 'p',
                                    content: '<p>&emsp;&emsp;一周物业费：￥55元</p>' +
                                        '<p>&emsp;&emsp;二周物业费：￥25元</p>' +
                                        '<p>&emsp;&emsp;三周物业费：￥35元</p>' +
                                        '<p>&emsp;&emsp;四周物业费：￥17元</p>'
                                },
                                {
                                    key: 2,
                                    itemType: 'chartList',
                                    itemNum: 1,
                                    content: [
                                        { key: 0, chartVar: 'echarts', alt: '可视化图表1' },
                                    ]
                                },
                                {
                                    key: 3,
                                    itemType: 'p',
                                    content: '请及时前往缴费处缴费，如果通知发布7天之内未完成以上全部缴费，则视为违约合同处理，请注意时间\n'
                                },
                            ]
                        },
                        {
                            key: 'item4',
                            title: '宿舍维护申请',
                            formType: 'repair',
                            itemArr: [
                                {
                                    key: 0,
                                    itemType: 'repairData',
                                    itemNum: 2,
                                    content: [
                                        { key: 0, title: '报修宿舍号', content: '紫晶城-03-1-502' },
                                        { key: 1, title: '报修人', content: '王小明' },
                                    ]
                                },
                                {
                                    key: 1,
                                    itemType: 'textarea',
                                    title: '报修原因说明',
                                    content: '宿舍空调制热效果出现问题，无法加热室内温度'
                                }
                            ]
                        },
                        {
                            key: 'item5',
                            title: '租房合同申请',
                            formType: 'contract',
                            itemArr: [
                                {
                                    key: 0,
                                    itemType: 'pdf',
                                    src: 'pdf/test.pdf'
                                },
                                {
                                    key: 1,
                                    itemType: 'showFile',
                                    title: '签字合同上传',
                                    content: ''
                                }
                            ]
                        },
                    ]
                }
            },
            totalMoney: {
                type: String,
                default: '132'
            },
            totalDate: {
                type: String,
                default: '2021-01-05'
            },
            previewFile(file) {
                console.log('你上传的文件为:', file);
                // Your process logic. Here we just mock to the same file
                return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
                    method: 'POST',
                    body: file,
                })
                    .then(res => res.json())
                    .then(({ thumbnail }) => thumbnail);
            },
        },
        data() {
            return {
                rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
                openKeys: ['sub1'],
                activeItemNum: 'item1',
                pdfPageNum: 1,
                pdfTotalNum: 1,
                pdfRotate: 0,
                // 加载进度
                curPdfPageNum: 0,
                loadedRatio: 0
            };
        },
        methods: {
            onOpenChange(openKeys) {
                const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)

                if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                    this.openKeys = openKeys
                } else {
                    this.openKeys = latestOpenKey ? [latestOpenKey] : []
                }
            },
            choiceItem(thisKey) {
                // console.log('现在点击的序号为：' + thisKey)
                this.activeItemNum = thisKey
            },
            prePage(){
                let page = this.pdfPageNum
                page = page > 1 ? page - 1 : this.pdfTotalNum
                this.pdfPageNum = page
            },
            nextPage(){
                let page = this.pdfPageNum
                page = page < this.pdfTotalNum ? page + 1 : 1
                this.pdfPageNum = page
            },
            clock(){
                this.pdfRotate += 90
            },
            counterClock(){
                this.pdfRotate -= 90
            },
            password(updatePassword, reason) {
                updatePassword(prompt('password is "123456"'))
                console.log('...reason...')
                console.log(reason)
                console.log('...reason...')
            },
            pageLoaded(e){
                this.curPdfPageNum = e
            },
            pdfError(error){
                console.error(error)
            },
            downloadFile(res, fileName) {
                if (!res) {
                    return
                }
                if (window.navigator.msSaveBlob) {  // IE以及IE内核的浏览器
                    try {
                        window.navigator.msSaveBlob(res, fileName)  // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
                        // window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度
                    } catch (e) {
                        console.log(e)
                    }
                } else {
                    let url = window.URL.createObjectURL(new Blob([res]))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)// 文件名
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) // 下载完成移除元素
                    window.URL.revokeObjectURL(url) // 释放掉blob对象
                }
            }
        },
        created() {
            var myChart = echarts.init(document.getElementById(this.props.contentList.contentList.itemArr.content.key));

            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];

            var app = new Object;

            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(posList, function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };

            var labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };

            var option = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['2012', '2013', '2014', '2015', '2016']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Forest',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: 'Steppe',
                        type: 'bar',
                        label: labelOption,
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: 'Desert',
                        type: 'bar',
                        label: labelOption,
                        data: [150, 232, 201, 154, 190]
                    },
                    {
                        name: 'Wetland',
                        type: 'bar',
                        label: labelOption,
                        data: [98, 77, 101, 99, 40]
                    }
                ]
            };

            myChart.setOption(option);
        }
    }
</script>

<style scoped>
    .contentBox{
        margin: 45px 0;
        padding: 25px 30px;
    }

    .itemNum1{
        width: 100%;
    }
    .itemNum2{
        width: 50%;
    }
    .itemNum3{
        width: 33.3%;
    }
    .itemNum4{
        width: 25%;
    }

    .emptyLogo{

    }

    .item-p{
        margin: 0;
        padding: 10px 0;

    }
    .item-chart{
        margin: 0;
        padding: 10px 0;
    }
    .item-repairData{
        margin: 0;
        padding: 10px 0;
    }
    .item-textarea{
        margin: 0;
        padding: 10px 0;
    }
    .item-textarea p{
        margin: 0;
        padding: 10px 0;
    }

    .formSubmit{
        display: block;
        transition: 0.4s;
    }
    .formSubmit:hover{
        color: #00A1FF;
    }

    .pdf{
        padding: 10px;
        border-radius: 10px;
        background: #eeeeee;
        transition: 0.4s;
    }
    .pdf:hover{
        background: #dddddd;
        box-shadow: 2px 2px 5px #555;
    }
    .pdf-tab{
        margin: 5px 0;
    }
    .btn-def{
        margin: 0 10px;
        padding: 5px 30px;
        background-color: #03A9F4;
        color: #ffffff;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.4s;
    }
    .btn-def:hover{
        background-color: #448AFF;
        color: #FF9800;
    }
    .btn-pre{

    }
    .btn-next{

    }
    .btn-data{
        margin: 3px 10px;
    }
</style>
